<template>
	<view class="good_avatars">
		<view class="good_avatars_tip">最新{{ goodAvatars.data.length }}个点赞</view>
		<view class="good_avatars_content">
			<view class="item" v-for="(avatar, index) in goodAvatars.data">
				<navigator :url="'../user/info?id=' + avatar.userId">
					<custom-avatar :item="{ ...avatar, type: 'normal' }"></custom-avatar>
					<view class="text">
						{{ avatar.nickName }}
						<view class="desc">{{ avatar.desc }}</view>
					</view>
				</navigator>
				<view class="handle"><custom-follow-button :item="avatar"></custom-follow-button></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			goodAvatars: {
				data: []
			},
			loading: false
		};
	},
	onLoad(ops) {
		this.newsId = ops.id;
		this.getGoodAvatarsData(this.newsId);
	},
	onPullDownRefresh() {
		this.getGoodAvatarsData(this.newsId).finally(() => {
			uni.stopPullDownRefresh();
		});
	},
	methods: {
		getGoodAvatarsData(id) {
			let that = this;
			return new Promise((resolve, reject) => {
				that.$store
					.dispatch('getGoodAvatarsData', { newsId: id })
					.then(res => {
						that.goodAvatars.data = res.data;
						resolve();
					})
					.catch(err => {
						console.log(err);
						reject(err);
					});
			});
		}
	}
};
</script>

<style lang="less">
.good_avatars {
	.good_avatars_tip {
		padding: 20rpx;
		font-size: 28rpx;
		color: #999999;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 99999;
		box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
	}
	.good_avatars_content {
		margin: 80rpx 20rpx 0 20rpx;
		.item {
			padding: 40rpx 20rpx;
			display:flex;
			align-items: center;
			navigator {
				flex:1;
				display: flex;
				align-items: center;
				.text {
					font-size: 28rpx;
					margin: 0 0 0 10rpx;
					flex: 1;
					.desc {
						display: block;
						color: #999999;
					}
				}
			}
		}
	}
}
</style>
